{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}

{% block scripts %}
<link type="text/css" rel="stylesheet" href="/static/styles/jqueryui/themes/base/jquery.ui.all.css"/>
<link type="text/css" rel="stylesheet" href="/static/styles/riders.css"/>
{% if showuser %}
<script type="text/javascript" src="/static/js/json2.js"></script>
{% if site_settings.development %}
    <script type="text/javascript" src="/static/js/jqueryui/jquery-ui-1.8.13.custom.min.js"></script>
{% else %}
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
{% endif %}
<script type="text/javascript" src="/static/js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/static/js/vanadium-min.js"></script>
<script type="text/javascript">
var VanadiumConfig = {separator: '|'};
$(document).ready(function(){ 
	$("#tabs").tabs();
    $("img.preview_img").preview();

    var jqwindow = $(window);
    var routes_loading = $("#routes_loading");
    var buildRoutes = function(routes){
        var my_routes = $("#my_routes");
        var route_rows = $(".route_row",my_routes);
        var total_rows = route_rows.length;
        for(var i=0; i<routes.length; i++){
            var route = routes[i];
            var row = $(route_rows[Math.abs(total_rows-2-i)%total_rows]).clone();

            row.attr("id", "route"+route.id);

            $(".preview_map a", row).attr("href", "{% url routes.routesviews.showallroutes %}"+route.id);
            $(".preview_map a img", row).attr("src", route.preview_url);
            $(".preview_map a img", row).attr("title", route.name);

            $(".distance .value", row).html((route.distance/1000).toFixed(0));

            $(".title_container .route_name", row).attr("href", "{% url routes.routesviews.showallroutes %}"+route.id);
            $(".title_container .route_name", row).html(route.name);
            $(".title_container .route_location", row).html(route.start_address + "</br> {% _ 'to' %} " +route.end_address);

            $(".title_container ._done", row).attr("href", "{% url routes.ridesviews.logride %}"+route.id);

             $(".title_container ._like", row).attr("id", "like_"+route.id);

            $(".preview_map a img", row).preview();

            my_routes.append(row);
        }
        bind_like_button();
    }
    var load_more_routes = function(count){
        window.console && console.log("start routes loading...");
        routes_loading.fadeIn(1000);
        $.ajax({
            type:"POST",
            url:"{% url apis.apisviews.rest %}",
            data: { method:"get_routes_by_uid",
                    pagesize: count,
                    uid: "{{ showuser.uid }}",
                    start_cursor: $("#cursor").val()},
            success: function(res){
                res = JSON.parse(res);
                if (res.status=="ok") {
                    var routes = res.routes;
                    window.console && console.log("routes "+routes.length)
                    $("#cursor").val(res.end_cursor);
                    if((routes.length == 0) || (routes.length < count)){
                        $("#load_more_routes").hide();
                    }
                    buildRoutes(routes);
                    $.growlUI(routes.length + ' {% _ "Routes Loaded" %}',' ');
                }  else{
                    alert(res.message);
                }
            },
            error:function(xhr, msg){
                alert(msg);
            },
            complete:function(){
                routes_loading.fadeOut(1000);
            }
        });
    }
    var bind_like_button = function(){
        $("._like").each(function(){
            $(this).unbind("click");
            $(this).click(function(){
                var routeid = $(this).attr("id").replace("like_", "");
                $.post("{% url apis.apisviews.rest %}",
                        {method:"add_favorite_route",
                         routeid: routeid
                        },
                        function(data){
                            data = JSON.parse(data);
                            if (data.status=="ok") {
                                $.growlUI('{% _ "Route added into your Favorites" %}',' ');
                            } else {
                                alert(data.message);
                            }
                });
            });
        });
    }

    bind_like_button();

    $("#load_more_routes").click(function(){
        load_more_routes({{ pagesize_routes }});
    });

    {% if showuser.uid == user.uid %}
    $("#add_a_bike").click(function(){
        $("#add_bike_form").toggle();

        var bike_photo = $("#bike_photo");
        var left = bike_photo.offset().left;
        var top = bike_photo.offset().top + 10;
        init_photo_upload( {left: left, top: top,
                photo_upload_callback: photo_upload_callback});
    });

    var photo_upload_callback = function(photourl){
        if (photourl){
            $("#photourl").val(photourl);
            $("#bike_photo").attr("src",photourl);
        }
    };
    $("a[name^='firend_']").click(function(){
        var request_item = $(this).parent().parent();
        $.ajax({
            type:"POST",
            url:"{% url apis.apisviews.rest %}",
            data: { method:"confirm_friend_request",
                    friend_uid: $(this).attr("title"),
                    agree: $(this).attr("name").replace("firend_","")
                   },
            success: function(res){
                res = JSON.parse(res);
                if (res.status=="ok") {
                    request_item.remove();

                }  else{
                    alert(res.message);
                }
            },
            error:function(xhr, msg){
                alert(msg);
            }
        });
    });

    $(".remove_fav").each(function(){
        $(this).click(function(){
            var routediv = $(this).parent();
            var routeid = routediv.attr("id").replace("fav","");
            $.post("{% url apis.apisviews.rest %}",
                    {method:"remove_favorite_route",
                     routeid: routeid
                    },
                    function(data){
                        data = JSON.parse(data);
                        if (data.status=="ok") {
                            routediv.hide();
                            $.growlUI('{% _ "Route removed from your Favorites" %}',' ');
                        } else {
                            alert(data.message);
                        }
            });
        });
    });

    $(".remove_route").each(function(){
            $(this).click(function(){
                if(! confirm('{% _ "R U SURE?" %}')){
                    return;
                }
                var routediv = $(this).parent();
                var routeid = routediv.attr("id").replace("route","");
                $.post("{% url apis.apisviews.rest %}",
                        {method:"remove_route",
                         routeid: routeid
                        },
                        function(data){
                            data = JSON.parse(data);
                            if (data.status=="ok") {
                                routediv.hide();
                                $.growlUI('{% _ "Route removed" %}',' ');
                            } else {
                                alert(data.message);
                            }
                });
            });
        });

    $(".remove_bike").each(function(){
        $(this).click(function(){
            if(! confirm('{% _ "R U SURE?" %}')){
                return;
            }
            var bikeli = $(this).parent();
            var bikeid = bikeli.attr("id");
            $.post("{% url apis.apisviews.rest %}",
                    {method:"remove_bike",
                     bikeid: bikeid
                    },
                    function(data){
                        data = JSON.parse(data);
                        if (data.status=="ok") {
                            bikeli.hide();
                            $.growlUI('{% _ "Bike removed" %}',' ');
                        } else {
                            alert(data.message);
                        }
            });
        });
    });

    $(".defriend").each(function(){
        $(this).click(function(){
            if(! confirm('{% _ "R U SURE?" %}')){
                return;
            }
            var friendli = $(this).parent();
            var friend_uid = friendli.attr("id");
            $.post("{% url apis.apisviews.rest %}",
                    {method:"defriend",
                     friend_uid: friend_uid
                    },
                    function(data){
                        data = JSON.parse(data);
                        if (data.status=="ok") {
                            friendli.hide();
                            $.growlUI('{% _ "Defriended" %}',' ');
                        } else {
                            alert(data.message);
                        }
            });
        });
    });
    {% endif %}

    {% if user %}
    $("#set_as_friend").click(function(){
        $.ajax({
            type:"POST",
            url:"{% url apis.apisviews.rest %}",
            data: { method:"send_friend_request",
                    friend_uid: "{{ showuser.uid }}"
                   },
            success: function(res){
                res = JSON.parse(res);
                if (res.status=="ok") {
                    $("#set_as_friend").html('{% _ "Friend Requests" %} {% _ "Sent" %}');
                }  else{
                    alert(res.message);
                }
            },
            error:function(xhr, msg){
                alert(msg);
            }
        });
    });
    {% endif %}     

    $(".left_item").each(function(){
        $(this).hover(function(evt){
            var friend_activity = $(this).next(".details");
            friend_activity.css({
						left: evt.pageX + 15 + "px",
						top:  evt.pageY + 10 + "px"
					});
            friend_activity.show();
        },function(){
            $(this).next(".details").hide();
        }).mousemove(function(evt){
            $(this).next(".details").css({
						left: evt.pageX  + 15 + "px",
						top:  evt.pageY + 10 + "px"
					});
        });
    });

    var more_rides = $("#more_rides");
    more_rides.click(function(){
        $.post("{% url apis.apisviews.rest %}",
                {method:"get_rides_by_uid",
                 start_cursor: $("#rides_cursor").val(),
                 uid: '{{ showuser.uid }}',
                 pagesize: {{ pagesize_rides }}
                },
                function(data){
                    data = JSON.parse(data);
                    if (data.status=="ok") {
                        $("#rides_cursor").val(data.end_cursor);
                        var count = data.rides.length;
                        if(count==0){
                            $.growlUI(' {% _ "No More Rides" %}',' ');
                            more_rides.hide();
                            return;
                        }
                        if(count<{{ pagesize_rides }}){
                            more_rides.hide();
                        }
                        for(var i=0; i<count; i++){
                            _insert_ride_to_list(data.rides[i]);
                        }
                        $.growlUI(count + ' {% _ "Rides Loaded" %}',' ');
                    } else {
                        alert(data.message);
                    }
        });
        _insert_ride_to_list = function(ride){
            $("#ride_"+ride.id).remove();
            var ride_li = $('<li class="ride"><img class="tab_img" src="/static/images/rides.png"/>'+
                   '<a id="ride_name">' + ride.name + " - " +
                   ride.duration.toFixed(1) + ' {% _ "hours" %}' + '</a></li>');
            ride_li.attr("id", "ride_"+ride.id);
            $("#ride_name", ride_li).attr("href","/rides/"+ride.id);
            $("#ride_name", ride_li).attr("title", ride.name);
            ride_li.insertBefore($("#more_rides_li"));
        };
    });

});
</script>
{% endif %}
{% endblock %}

{% block menu %}
{% include '_menu_riders.html' %}
{% endblock %}

{% block main-page %}
<div id="user_left">
	{% if showuser %}
        <div id="basic_info" class="left_block">
            <img id="photo" src="{{ showuser.photourl|default:"/static/images/rider.jpg"|safe }}" alt="{{ showuser.name }}"/>
            <div id="name_location">
                <p id="name"> {{ showuser.name }} </p>
                <p>{{ showuser.city }},{{ showuser.country }}</p>
                <p class="grade" title="{{ showuser.Point }}">
                    {% for sun in showuser.Suns %}<img src="/static/images/sun.png"/>{% endfor %}
                    {% for start in showuser.Stars %}
                        <img src="/static/images/star.png"/>
                    {% empty %}
                        <img src="/static/images/star_half.png"/>
                    {% endfor %}
                </p>
                <p id="intro">{{ showuser.intro }}</p>
                {% if user %}
                    {% if showuser.uid == user.uid %}
                    <p><a href="{% url riders.ridersviews.editprofile user.uid %}">{% _ "Edit Your Profile" %}</a></p>
                    {% else %}
                        {% if showuser.key_name not in user.friends %}
                            {% if user.key_name in showuser.friendrequestlist %}
                                {% _ "Friend Requests" %} {% _ "Sent" %}
                            {% else %}
                                <p id="set_as_friend"><a href="javascript:;">{% _ "Add as friend" %}</a></p>
                            {% endif %}
                        {% else %}
                            {% _ "Friend" %}
                        {% endif %}
                    {% endif %}
                {% endif %}
            </div>
        </div>
        <div id="bikes" class="left_block">
            <h4>{% _ "Bikes" %}({{ showuser.BikesCount }})
            {% if showuser.uid == user.uid %}
                <a id="add_a_bike" href="javascript:;">{% _ "Add a bike" %}</a>
            {% endif %}
            </h4>
            {% if showuser.uid == user.uid %}
            <div id="add_bike_form">
                <div>{% include '_photo_upload_form.html' %}</div>
                <form method="post"><table id="add_bike_table">
                    <tr>
                        <th>{% _ "Photo" %}:</th>
                        <td>
                            <img id="bike_photo" alt="Bike Photo" src="/static/images/bike.gif"/>
                            <input type="hidden" id="photourl" name="photourl" value="/static/images/bike.gif"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Type" %}:</th>
                        <td>
                            <select id="type" name="type">
                                {% for bt in biketypes %}
                                    <option value="{{ bt }}">{% _ bt %}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Year" %}*:</th>
                        <td><input id="year"  name="year" type="text" size="8" value=""
                                   class=":required :integer :max_length|4"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Make" %}*:</th>
                        <td><input id="make"  name="make" type="text" size="16" value="DIY"
                                   class=":required :max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Model" %}*:</th>
                        <td><input id="model"  name="model" type="text" size="16" value=""
                                   class=":required :max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Frame" %}:</th>
                        <td><input id="frame"  name="frame" type="text" size="16" value=""
                                   class=":max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Fork" %}:</th>
                        <td><input id="fork"  name="fork" type="text" size="16" value=""
                                   class=":max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Components" %}:</th>
                        <td><input id="components"  name="components" type="text" size="16" value=""
                                   class=":max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Wheels" %}:</th>
                        <td><input id="wheels"  name="wheels" type="text" size="16" value=""
                                   class=":max_length|20 :format|/^[^<>;]*$/i|adv_bike"/>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% _ "Description" %}:</th>
                        <td><textarea id="description"  name="description" wrap="soft"
                                      rows="3" cols="16" class=":max_length|70 :format|/^[^<>;]*$/i|adv_bike"></textarea>
                        </td>
                    </tr>
                    <tr><td colspan="2"><span id="adv_bike" style="display:none">[< > ;] {% _ "are not allowed" %}</span></td></tr>
                    <tr>
                        <th scope="row">&nbsp;
                        </th>
                        <td>
                            <input type="submit" id="save_btn" class="cmdbutton :submit"
                                   value="{% _ 'Save' %}" />
                        </td>
                    </tr>
                </table></form>
            </div>
            {% endif %}
            <ul>
            {% for bike in showuser.Bikes %}
                <li class="left_item" id="{{ bike.id }}">
                    <img src="{{ bike.photourl|default:"/static/images/bike.gif"|safe }}" alt="{{ bike.name }}"/>
                    <p>{{ bike.name }}</p>
                    {% if showuser.uid == user.uid %}
                    <a class="remove_bike close" title="{% _ 'Remove Bike' %}" href="javascript:void(0);">x</a>
                    {% endif %}
                </li>

                <div class="details"><ul>
                    <li>{% _ "Type" %}: {%  _ bike.type %}</li>
                    <li>{% _ "Frame" %}: {{ bike.frame }}</li>
                    <li>{% _ "Fork" %}: {{ bike.fork }}</li>
                    <li>{% _ "Components" %}: {{ bike.components }}</li>
                    <li>{% _ "Wheels" %}: {{ bike.wheels }}</li>
                    <li></li>
                    <li>  {{ bike.description }}</li>
                    <li><hr/></li>
                    <li>
                        <b>{{ bike.Stats.rides_total_distance|divide:"1000"|_u|floatformat:"0" }}</b>
                        {{ unit.km_mile }},
                        <b>{{ bike.Stats.rides_count }}</b> {% _ "Rides" %}
                    </li>
                    <li>
                        <b>{{ bike.Stats.hours_on_bike|floatformat:"1" }}</b>
                        {% _ "hours" %}
                    </li>
                </ul></div>
            {% endfor %}
            </ul>
        </div>
        <div id="friends" class="left_block">
            <h4>{% _ "Friends" %}({{ showuser.FriendsCount }})</h4>
            <ul>
            {% for friend in showuser.Friends %}
                <li class="left_item" id="{{ friend.uid }}">
                    <a href="{% url riders.ridersviews.userpage friend.uid %}">
                    <img src="{{ friend.photourl|default:"/static/images/rider.jpg"|safe }}" alt="{{ friend.name }}"/>
                    <p>{{ friend.name }}</p></a>
                    {% if showuser.uid == user.uid %}
                    <a class="defriend close" title="{% _ 'Defriend' %}" href="javascript:void(0);">x</a>
                    {% endif %}
                </li>
                <div class="details"><ul>
                    {% for activity in friend.LatestActivities %}
                        <li>{% _ activity.Action %}
                        {% ifeq activity.Action "Create a Route"%}
                            <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Add a Bike"  %}
                            <a href="{% url views.indevelop %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Add a Ride"  %}
                            <a href="{% url routes.ridesviews.showride activity.Target.id %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Add a Friend"  %}
                            <a href="{% url riders.ridersviews.userpage activity.Target.uid %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Defriend"  %}
                            <a href="{% url riders.ridersviews.userpage activity.Target.uid %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Join Team"  %}
                             <a href="{% url views.indevelop %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Add a Comment"  %}
                         {% _ "On" %} <a href="{% url routes.routesviews.showroute activity.Target.route.id %}">{{ activity.Target.route.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Add Favorite"  %}
                             <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                        {% ifeq activity.Action "Remove Favorite"  %}
                             <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                        {% endifeq %}
                              {{ activity.CreateDateTime|cctimesince }} {% _ "ago" %}
                        </li>
                    {% endfor %}
                    <li><hr/></li>
                    <li>
                        <b>{{ friend.Stats.routes_total_distance|divide:"1000"|_u|floatformat:"0" }}</b>
                        {{ unit.km_mile }},
                        <b>{{ friend.Stats.routes_count }}</b> {% _ "Routes" %}
                    </li>
                    <li>
                        <b>{{ friend.Stats.rides_total_distance|divide:"1000"|_u|floatformat:"0" }}</b>
                        {{ unit.km_mile }},
                        <b>{{ friend.Stats.rides_count }}</b> {% _ "Rides" %}
                    </li>
                    <li>
                        <b>{{ friend.Stats.hours_on_bike|floatformat:"1" }}</b>
                        {% _ "hours" %} {% _ "on bike" %}
                    </li>
                </ul></div>
            {% endfor %}
            </ul>
        </div>
        {% if showuser.uid == user.uid %}
        <div id="friend_request" class="left_block">
            <h4>{% _ "Friend Requests" %}({{ showuser.FriendsCountInRequest }})</h4>
            <ul>
                {% for friend in showuser.FriendsInRequest %}
                <li class="left_list">
                    <span>
                        <a href="{% url riders.ridersviews.userpage friend.uid %}"> {{ friend.name }}</a>
                        {% _ "requested friendship with you" %} <br/>
                        <a name="firend_yes" class="yellowbutton inline-button"
                           href="javascript:;" title="{{ friend.uid  }}">Yes</a>
                        <a name="firend_no" class="yellowbutton inline-button"
                           href="javascript:;" title="{{ friend.uid }}">No</a>
                    </span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    {% endif %}
</div>
<div id="user_right">
	{% if showuser %}
        <fieldset id="activity_fieldset">
            <legend>{% _ "Activity" %}</legend>
            <div id="activity">
                <ul>
                {% for activity in showuser.LatestActivities %}
                    <li><img src="/static/images/activity.gif" />{% _ activity.Action %}
                    {% ifeq activity.Action "Create a Route"%}
                        <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Add a Bike"  %}
                        <a href="{% url views.indevelop %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Add a Ride"  %}
                        <a href="{% url routes.ridesviews.showride activity.Target.id %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Add a Friend"  %}
                        <a href="{% url riders.ridersviews.userpage activity.Target.uid %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Defriend"  %}
                            <a href="{% url riders.ridersviews.userpage activity.Target.uid %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Join Team"  %}
                         <a href="{% url views.indevelop %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Add a Comment"  %}
                         {% _ "On" %} <a href="{% url routes.routesviews.showroute activity.Target.route.id %}">{{ activity.Target.route.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Add Favorite"  %}
                         <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                    {% ifeq activity.Action "Remove Favorite"  %}
                         <a href="{% url routes.routesviews.showroute activity.Target.id %}">{{ activity.Target.name }}</a>
                    {% endifeq %}
                          {{ activity.CreateDateTime|cctimesince }} {% _ "ago" %}
                    </li>
                {% endfor %}
                </ul>
            </div>
        </fieldset>
        <fieldset id="stats_fieldset">
            <legend>{% _ "Stats" %}</legend>
            <div id="stats">
                <ul>
                    <li>
                        <b>{{ showuser.Stats.routes_total_distance|divide:"1000"|_u|floatformat:"0" }}</b>
                        {{ unit.km_mile }},
                        <b>{{ showuser.Stats.routes_count }}</b> {% _ "Routes" %}
                    </li>
                    <li>
                        <b>{{ showuser.Stats.rides_total_distance|divide:"1000"|_u|floatformat:"0" }}</b>
                        {{ unit.km_mile }},
                        <b>{{ showuser.Stats.rides_count }}</b> {% _ "Rides" %}
                    </li>
                    <li>
                        <b>{{ showuser.Stats.hours_on_bike|floatformat:"1" }}</b>
                        {% _ "hours" %} {% _ "on bike" %}
                    </li>
                </ul>
            </div>
        </fieldset>
        <div class="clear"></div>
        <div id="tabs">
            <ul>
                <li><a href="#routes"><img class="tab_img" src="/static/images/routes.png"/>{% _ "Routes" %}</a></li>
                <li><a href="#favorites"><img class="tab_img" src="/static/images/favorites.png"/>{% _ "Favorites" %}</a></li>
                <li><a href="#rides"><img class="tab_img" src="/static/images/rides.png"/>{% _ "Rides" %}</a></li>
                <li><a href="#calendar"><img class="tab_img" src="/static/images/calendar.png"/>{% _ "Calendar" %}</a></li>
            </ul>
            <div id="routes">
                {% if routes %}
                    <div id="my_routes" class="routes_container">
                        {% for route in routes %}
                        <div id="route{{ route.id }}" class="route_row {%if forloop.counter0|divisibleby:2 %}alt{%endif%}" >
                            <div class="preview_map">
                                <a href="{% url routes.routesviews.showroute route.id %}"><img class="preview_img" src="{{ route.preview_url|safe }}" title="{{ route.name }}"/></a>
                            </div>
                            <div class="distance">
                                <span class="value">{{ route.distance|divide:"1000"|_u|floatformat:"0" }}</span>
                                <span class="unit">{{ unit.km_mile }}</span>
                            </div>
                            <div class="title_container">
                                <span><a class="route_name" href="{% url routes.routesviews.showroute route.id %}">{{ route.name }}</a>
                                    <a class="_done" href="{% url routes.ridesviews.logride route.id %}" title="{% _ 'Have Done' %}">
                                        <img width="16px" height="16px" src="/static/images/done.png" alt="{% _ 'Have Done' %}"/>
                                    </a>
                                    <a id="like_{{ route.id }}" class="_like" href="javascript:;" title="{% _ 'Like' %}">
                                        <img width="16px" height="16px" src="/static/images/like.png"  alt="{% _ 'Like' %}"/>
                                    </a>
                                    {% _ "Created on" %}
                                    {{ route.create_datetime|cctimesince }} {% _ "ago" %}
                                </span>
                                <span class="route_location">{{ route.start_address }}</br> {% _ "to" %} {{ route.end_address }}</span>
                            </div>
                            {% if showuser.uid == user.uid %}
                            <a class="remove_route close" title="{% _ 'Remove Route' %}" href="javascript:void(0);">x</a>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    <div class="clear"></div>
                    {% if routes|length >=  pagesize_routes %}
                        <div id="div_load_more"><a id="load_more_routes" href="javascript:;">{% _ "More Routes..." %}</a></div>
                        <div id="routes_loading"><img src="/static/images/routes_loading.gif" alt="route loadig..."/></div>
                    {% endif %}
                    <input id="cursor" type="hidden" value="{{ cursor }}"/>
                {% else %}
                    <p>{% _ "no route" %}</p>
                {% endif %}
            </div>
            <div id="favorites">
                <div id="my_favs" class="routes_container">
                    {% for route in showuser.Favorites %}
                    <div id="fav{{ route.id }}" class="route_row {%if forloop.counter0|divisibleby:2 %}alt{%endif%}" >
                        <div class="preview_map">
                            <a href="{% url routes.routesviews.showroute route.id %}"><img class="preview_img" src="{{ route.preview_url|safe }}" title="{{ route.name }}"/></a>
                        </div>
                        <div class="distance">
                            <span class="value">{{ route.distance|divide:"1000"|_u|floatformat:"0" }}</span>
                            <span class="unit">{{ unit.km_mile }}</span>
                        </div>
                        <div class="title_container">
                            <span><a class="route_name" href="{% url routes.routesviews.showroute route.id %}">{{ route.name }}</a>
                                <a class="_done" href="{% url routes.ridesviews.logride route.id %}" title="{% _ 'Have Done' %}">
                                    <img width="16px" height="16px" src="/static/images/done.png" alt="{% _ 'Have Done' %}"/>
                                </a>
                                <a id="like_{{ route.id }}" class="_like" href="javascript:;" title="{% _ 'Like' %}">
                                    <img width="16px" height="16px" src="/static/images/like.png" alt="{% _ 'Like' %}"/>
                                </a>
                                {% _ "By" %}
                                <a href="{% url riders.ridersviews.userpage route.Creator.uid %}">{{route.Creator.name}}</a>
                                {% _ "Created on" %}
                                {{ route.create_datetime|cctimesince }} {% _ "ago" %}
                            </span>
                            <span class="route_location">{{ route.start_address }}</br> {% _ "to" %} {{ route.end_address }}</span>
                        </div>
                        {% if showuser.uid == user.uid %}
                        <a class="remove_fav close" title="{% _ 'Remove Favorite' %}" href="javascript:void(0);">x</a>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <div class="clear"></div>
            </div>
            <div id="rides">
                {% if showuser.LatestRides %}
                    <div>
                        <ul id="rides_list">
                        {% with showuser.LatestRides as rides %}
                            {% for ride in rides %}
                                <li class="ride" id="ride_{{ ride.id }}">
                                    <img class="tab_img" src="/static/images/rides.png"/>
                                    <a href="{% url routes.ridesviews.showride ride.id %}" title="{{ride.name}}">
                                        {{ ride.name }} -
                                        {{ ride.route.distance|divide:"1000"|_u|floatformat:"0" }} {{ unit.km_mile }} -
                                        {{ ride.duration }} {% _ "hours" %}
                                    </a>
                                </li>
                            {% endfor %}
                            {% if rides|length >=  pagesize_rides %}
                                <li id="more_rides_li">
                                    <a id="more_rides" href="javascript:;" class="yellowbutton smallsize">{% _ "More..." %}</a>
                                </li>
                            {% endif %}
                        {% endwith %}
                        </ul>
                        <input type="hidden" id="rides_cursor" value="{{  showuser.Cursor_Ride }}"/>
                    </div>
                {% else %}
                    <p>{% _ "no ride" %}</p>
                {% endif %}
            </div>
            <div id="calendar">

            </div>
        </div>
    {% endif %}
</div>
{% endblock %}
